<template>
    <view class="tab-bar" :class="[theme]">
        <view
            v-for="(item, index) in computedTabList"
            :key="item.title"
            :class="['tab-bar-item', { active: item.title === PropsData.current }]"
            @click="handleTabSwitch(index)"
        >
            <template v-if="item.title === PropsData.current">
                <view class="active-img-box">
                    <image :src="item[`active_${theme}`]" class="image"/>
                </view>
            </template>
            <template v-else>
                <image :src="item.icon" class="image"/>
            </template>
            <text class="title">{{ item.title }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { ref, defineProps, computed, watch } from 'vue';
import { useThemeStore } from '@/store/themeStore';
import { useModuleDataStore } from '@/store/useModuleDataStore';

// 使用 store 获取主题
const themeStore = useThemeStore();
const { theme } = storeToRefs(themeStore);

// 定义 Props
const PropsData = defineProps(['current']);

// uni.getStorageSync('tabBarData')
let _tabBarData = uni.getStorageSync('tabBarData') ? JSON.parse(uni.getStorageSync('tabBarData')) : [];
// 定义响应式状态
const storedData = ref();

// 计算 tabList
const computedTabList = computed(() => {
    return storedData.value ? storedData.value : [];
});

// 使用 moduleDataStore
const moduleDataStore = useModuleDataStore();

// 监听 moduleDataStore.tabBarData 的变化
watch(() => moduleDataStore.tabBarData, (newVal) => {
    if (newVal.length > 0) {
        storedData.value = newVal;
    }
}, { immediate: true });

// 处理 tab 切换
const handleTabSwitch = (index: number) => {
    if (PropsData.current !== computedTabList.value[index].title) {
        uni.switchTab({
            url: computedTabList.value[index].pagePath,
        });
    }
};
</script>

<style lang="scss" scoped>
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    height: calc(118rpx + env(safe-area-inset-bottom));
    background-color: transparent;
}

.tab-bar-item {
    position: relative;
    margin-top: 20rpx;
    padding: 15rpx 0 8rpx;
    height: 98rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #333;
    background: #FFFFFF;
    box-sizing: border-box;

    &::before {
        content: "";
        position: absolute;
        top: 1px;
        left: 0;
        width: 100%;
        height: 1px;
        box-shadow: 0px -8px 20px rgba(0,0,0, 0.5);
        z-index: -1;
    }

    image {
        width: 39rpx;
        height: 39rpx;
    }
    .title {
        font-size: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #888888;
        text-shadow: 0px -16px 40px rgba(238,238,238,0.3);
    }
}

.tab-bar-item.active {
    position: relative;
    display: flex;
    padding-top: 0;
    justify-content: flex-end;

    .active-img-box {
        position: absolute;
        top: -20rpx;
        width: 92rpx;
        height: 92rpx;
        background: #FFFFFF;
        box-shadow: 0rpx -16rpx 40rpx 0rpx rgba(238,238,238,0.2);
        border-radius: 50%;
        .image {
            width: 68rpx;
            height: 68rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .title {
        color: var(--theme-color);
        z-index: 99;
    }
}

</style>
